<script setup>
import { ref, onMounted } from 'vue'
import { NEW_FILE, OPEN_FILE, SAVE_FILE, OPEN_FOLDER } from '@msg/file.js'
import SubMenu from './components/SubMenu.vue'

const { ipcRenderer } = window.electron
const folderList = ref([])

onMounted(() => {
  ipcRenderer.on(`${OPEN_FOLDER}-render`, (e, data) => {
    folderList.value = data
  })
})

const onSelect = (path) => {
  ipcRenderer.send(OPEN_FILE, path)
}
</script>

<template>
  <div class="folder-list-wrapper">
    <el-menu
      @select="onSelect"
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      default-active="2"
      text-color="#fff"
    >
      <template v-for="sub in folderList">
        <SubMenu v-if="sub.children && sub.children.length" :data="sub" :key="sub.path" />
        <el-menu-item v-else :index="sub.path" :key="sub.path">{{ sub.name }}</el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<style lang="scss" scoped>
.folder-list-wrapper {
  height: 100%;
  overflow: auto;
  flex: 0 0 30%;
  :deep(.el-menu) {
    height: 100%;
  }
}
</style>
